<template>
  <el-dialog class="fail-detail-dialog" title="通过型结果" :visible.sync="dialogVisible" width="80%" :before-close="closeDialog"
    :close-on-click-modal="true">
    <div class="content">
      <el-table :data="allResultTable" v-loading="loading" tooltip-effect="dark" style="width: 100%" :border="true" height="550"
        :header-cell-class-name="headerCellClassName" :cell-class-name="cellClassName">
        <el-table-column prop="ticketId" label="ID" width="200px" fixed>
        </el-table-column>
        <el-table-column prop="AllPass" label="运行结果" width="150px" fixed :filters="[{text: '通过',value:'通过'},{text: '不通过',value:'不通过'}]" :filter-method="filterHandler">
          <template slot-scope="scope">
            <span v-if="scope.row.AllPass === '通过'">
              <i class="iconfont icon-check" style="color:#00cb00"></i>
            </span>
            <span v-else>
              <i class="iconfont icon-close" style="color:#ff1f1f"></i>
            </span>
            {{scope.row.AllPass}}
          </template>
        </el-table-column>
        <el-table-column v-for="(item,index) in allResultColumns" :label="item.name" :width="item.width" :key="index">
          <template slot-scope="scope">
            <span v-if="scope.row[item.prop] === '通过'">
              <i class="iconfont icon-check" style="color:#00cb00"></i>
            </span>
            <span v-else>
              <i class="iconfont icon-close" style="color:#ff1f1f"></i>
            </span>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination background layout="total,sizes, prev, pager, next" :page-sizes="[10,20, 50, 100]"
          :page-size="pageSize" :current-page.sync="pageIndex" :total="total" @size-change="handleSizeChange"
          @current-change="handleCurrentChange">
        </el-pagination>
      </div>
    </div>
  </el-dialog>
</template>
<script>
// import { regressionIdAllAds } from '@/business/regressionIdAllAds'
import { getRegressionIdAllAds } from '@/api/report'
export default {
  name: 'FailDetailDialog',
  props: {
    dialogVisible: Boolean,
    sessionId:String
  },
  data() {
    return {
      allResultTable: [],
      allResultColumns: [],
      pageIndex: 1,
      pageSize: 10,
      total: 0,
      loading: false
    }
  },
  watch: {
    dialogVisible(newVal){
      if(newVal){
        this.getAllData()
      }
    }
  },
  methods: {
    closeDialog() {
      this.$emit('closeDialog')
      this.allResultColumns = []
    },
    cellClassName() {
      return 'body-cell-custom'
    },
    headerCellClassName() {
      return 'header-cell-custom'
    },
    //分页展示表格数据
    handleCurrentChange(val) {
      this.pageIndex = val
      this.getAllData()
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getAllData()
    },
    filterHandler(value, row, column) {
      const property = column['property'];
      return row[property] === value;
    },
    getAllData(){
      this.loading = true
      this.allResultColumns = []
      const params ={ 
        session_id:this.sessionId,
        page_num: this.pageIndex,
        page_size: this.pageSize,
      }
      getRegressionIdAllAds(params).then(res => {
        const data = res.data.items
        this.total = res.data.pageBean.totalElements
        // metric 中英文 映射 
        const metricNameMap = res.data.metricNameMap
        // 处理 table column 数据 
        for(let [k,v] of Object.entries(metricNameMap)){
          this.allResultColumns.push(
            {
              name: v,
              prop: k,
              width: '150px'
            })
        }
        // 处理 table data数据 
        this.allResultTable = data.map((item) => {
          const gradingDetail = item.gradingDetail
          const metricArr = []
          for(let [key,value] of Object.entries(gradingDetail)){
            metricArr.push({[key]: value.is_pass === 1 ? '通过' : '不通过'})
          }
          return Object.assign({
            ticketId: item.ticketId,
            allpass: item.gradingDetail.AllPass.is_pass,
          }, ...metricArr)
        })
        this.loading = false
      })
    }

  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/vars.scss';
  .fail-detail-dialog{
    ::v-deep .el-dialog{
      height: 730px;
    }
    ::v-deep .el-dialog__header {
      padding: 15px 20px;
      background: rgb(242, 243, 248);
      .el-dialog__title{
        padding-left: 10px;
        border-left: 2px solid $primary-color;
        line-height: 24px;
        font-size: 16px;
        color: #303133;
      }
      .el-dialog__headerbtn .el-dialog__close {
        color: #303133;
      }
    }
    ::v-deep .el-dialog__body{
      padding: 10px 20px;
      .title{
        margin-bottom: 20px;
        font-size: 16px;
      }
      .el-table {
        height: 550px !important;
        overflow: auto;
      }
    }

  }
</style>